<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1, minimum-scale=1, width=device-width"; />
  <LINK rel="stylesheet" href="js/upload_Photo/style.css">
	<script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/upload_Photo/iscroll-zoom.js"></script>
  <script src="js/upload_Photo/hammer.js"></script>
  <script src="js/upload_Photo/jquery.photoClip.js"></script>
</head>
<style type="text/css">
.radius {
    width: 50px;
    height: 50px; 
    border-radius: 25px;
    border: 0;
    display: block;
    position: absolute;
}
</style>
<body>
   <!-- 头像 -->
    <img class='radius' src="images/ggt.jpg" />
    <input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*"   />
    <input id="headUuid" type="hidden" />


<!-- 上传头像弹出框 -->
   <div class="htmleaf-container">
       <div id="clipArea"></div>
       <div id="view"></div>
   </div>

   <div id="dpage">
         <a href="javascript:void(0);" class="qx" id="cancleBtn">取消</a>
         <a href="javascript:void(0);" class="qx" id="clipBtn">确认</a>
    </div>  
</body>
<script>
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$("#clipArea").photoClip({
  width: 150,
  height: 150,
  file: "#file",
  view: "#view",
  ok: "#clipBtn",
  loadStart: function() {
    console.log("照片读取中");
  },
  loadComplete: function() {
    console.log("照片读取完成");
  },
  clipFinish: function(dataURL){
    console.log(dataURL);
    /*对接后台接口*/
   /* uploadStrem(dataURL);*/
  }
});
$(function(){
  $("#clipBtn").click(function(){
    $(".radius").attr("src", imgsource);
    $(".htmleaf-container").hide();
    $("#dpage").removeClass("show");
  });
  $("#cancleBtn").click(function(){
    $(".htmleaf-container").hide();
    $("#dpage").removeClass("show");
  });
});
function setImagePreview() {
  $(".htmleaf-container").fadeIn(300);
  $("#dpage").addClass("show");
}
</script>
</html>
